<script setup lang="ts">
  import { computed } from 'vue';
  import Text from './components/Text.vue';
  import Select from './components/Select.vue';
  import Date from './components/Date.vue';
  import FormatDate from './components/FormatDate.vue';
  const props = defineProps<{
    modelValue: any;
    valueType: string;
    fieldProps?: any;
  }>();
  const emit = defineEmits(['update:modelValue']);
  const onChange = (e: any) => emit('update:modelValue', e);
  const componentName = computed(() => {
    const map: any = {
      text: Text,
      select: Select,
      date: Date,
      formatDate: FormatDate,
    };
    return map[props.valueType];
  });
</script>

<template>
  <component v-bind="fieldProps" :is="componentName" :value="modelValue" @update:value="onChange" />
</template>

<style scoped lang="less"></style>
